<template>
  <div class="mine">
    <comRNav title="我的优购" />
    <div class="module">
      <div class="moduleManage">
        <div class="touX" @click="handleJump"></div>
        <p class="moduleName">{{username}}</p>
        <span class="member">普通会员</span>
        <em></em>
        <span class="hasUnder" @click="handleJump">账户管理 &gt;</span>
      </div>
    </div>
    <div class="userList">
      <p class="userOrder">我的订单<em>全部订单</em><b></b></p>
      <div class="userOrderCon">
        <dl>
          <dt><img src="../assets/mine/pay.png" alt=""></dt>
          <dd>待付款</dd>
        </dl>
        <dl>
          <dt><img src="../assets/mine/logistics.png" alt=""></dt>
          <dd>查看物流</dd>
        </dl>
        <dl>
          <dt><img src="../assets/mine/evaluate.png" alt=""></dt>
          <dd>待评价</dd>
        </dl>
      </div>
    </div>
    <div class="userList">
      <p class="userOrder">我的钱包</p>
      <div class="userOrderCon">
        <dl>
          <dt>0</dt>
          <dd>礼品卡</dd>
        </dl>
        <dl>
          <dt>0</dt>
          <dd>优惠卷</dd>
        </dl>
        <dl>
          <dt>100</dt>
          <dd>积分</dd>
        </dl>
      </div>
    </div>
    <div class="userOrderConList">
      <dl>
        <dt><img src="../assets/mine/member.png" alt=""></dt>
        <dd>用户中心</dd>
      </dl>
      <dl>
        <dt><img src="../assets/mine/integration.png" alt=""></dt>
        <dd>积分商城</dd>
      </dl>
      <dl>
        <dt><img src="../assets/mine/past.png" alt=""></dt>
        <dd>每日签到</dd>
      </dl>
      <dl>
        <dt><img src="../assets/mine/service.png" alt=""></dt>
        <dd>联系客服</dd>
      </dl>
    </div>
    <div class="userOrderConList">
      <dl @click="handleCollect">
        <dt><img src="../assets/mine/collection.png" alt=""></dt>
        <dd>收藏/关注</dd>
      </dl>
      <dl>
        <dt><img src="../assets/mine/help.png" alt=""></dt>
        <dd>帮助中心</dd>
      </dl>
      <dl>
        <dt><img src="../assets/mine/suguession.png" alt=""></dt>
        <dd>意见反馈</dd>
      </dl>
    </div>
    <MineFooter />
  </div>
</template>

<script>
import comRNav from "../components/comRNav";
import MineFooter from "../components/MineFooter";
export default {
  name: "Mine",
  data() {
    return {
      username: localStorage.getItem("token")
    };
  },
  components: {
    comRNav,
    MineFooter
  },
  methods: {
    //账户管理
    handleJump() {
      this.$router.push("/accountManage");
    },
    //收藏关注
    handleCollect() {
      this.$router.push("/collect");
    }
  }
};
</script>

<style lang="scss" scoped>
.mine {
  width: 100%;
  // height: 100vh;
  background-color: #eee;
  padding-bottom: 70px;
  .module {
    height: 89px;
    padding: 12px;
    background: url(../assets/mine/top-backgroundc.jpg) center center no-repeat;
    background-size: cover;
    box-sizing: border-box;
    position: relative;
    .moduleManage {
      // height: 70px;
      overflow: hidden;
      margin-bottom: 0;
      color: #fff;
      padding-left: 60px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .touX {
        width: 60px;
        height: 56px;
        background: url(../assets/mine/user.png) left center no-repeat;
        background-size: 50px auto;
        position: absolute;
        left: 12px;
      }
      .moduleName {
        width: 100%;
        font-size: 16px;
        line-height: 24px;
        font-family: "Microsoft YaHei", Helvetica, Arial, sans-serif;
      }
      .member {
        margin-top: 5px;
        display: block;
        font-size: 14px;
        line-height: 24px;
        font-style: normal;
        font-weight: 100;
        padding: 3px 6px;
        border-radius: 12px;
        background-color: #bd2302;
        color: #fff;
        padding: 0px 6px;
        width: fit-content;
      }
      em {
        display: block;
        position: absolute;
        top: 14px;
        right: 12px;
        width: 22px;
        height: 22px;
        background: url(../assets/mine/information-small.png) center center
          no-repeat;
        background-size: 22px auto;
      }
      .hasUnder {
        position: absolute;
        color: #fff;
        bottom: 10px;
        right: 12px;
        font-size: 14px;
      }
    }
  }
  .userList {
    background-color: #fff;
    margin-bottom: 8px;
    .userOrder {
      display: block;
      padding: 8px 18px;
      font-size: 16px;
      position: relative;
      color: #333;
      border-bottom: 1px solid #ddd;
      line-height: 24px;
      em {
        position: absolute;
        right: 22px;
        font-size: 12px;
        color: #a0a0a0;
        font-style: normal;
        top: 50%;
        transform: translateY(-50%);
      }
      b {
        position: absolute;
        width: 9px;
        height: 100%;
        top: 0px;
        right: 10px;
        background: url(../assets/mine/gray-open.png) center center no-repeat;
        background-size: 8px auto;
      }
    }
    .userOrderCon {
      display: flex;
      padding: 15px 0 10px;
      dl {
        width: 33.33%;
        text-align: center;
        dt {
          height: 20px;
          margin-bottom: 5px;
          line-height: 20px;
          font-size: 12px;
          font-weight: bold;
          color: #666;
          img {
            width: 26px;
          }
        }
        dd {
          padding-top: 7px;
          font-size: 13px;
          color: #333;
        }
      }
    }
  }
  .userOrderConList {
    display: flex;
    padding: 15px 0 10px;
    background-color: #fff;
    margin-bottom: 8px;
    dl {
      width: 25%;
      text-align: center;
      dt {
        height: 27px;
        margin-bottom: 5px;
        line-height: 20px;
        font-size: 12px;
        font-weight: bold;
        color: #666;
        img {
          width: 23px;
          vertical-align: middle;
        }
      }
      dd {
        padding-top: 7px;
        font-size: 13px;
        color: #333;
      }
    }
  }
}
</style>